<template>
  <div class="new_friend">
    <div class="new_friend-top">
      <div class="left">
         新的朋友
      </div>
      <div class="right">
      </div>
    </div>
    <div class="new_friend-body">
      <div class="container">
        <div v-for="item in newFriendList" class="outerLayer">
          <div class="left">
            <img :src="item.avatar"/>
          </div>
          <div class="right">
            <span class="right-title">{{item.username}}</span>
          </div>
          <div class="extra">
            <div >
              <el-button v-if="newFreindId != item.user_friend_id" @click.stop="acceptAddFriend(item.user_friend_id)" type="success">接受</el-button>
              <el-button v-if="newFreindId != item.user_friend_id" @click.stop="refuseAddFriend(item.user_friend_id)" type="danger">拒绝</el-button>
              <span v-else>{{resultTitle}}</span>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from 'vue'
import {newsController} from '@/api/index'

const emit=defineEmits(['changeIsHaveNew'])

// 新好友列表
const newFriendList = ref([])
// 展示是否添加结果
const isShowResult = ref(true)
// 展示操作结果
const resultTitle = ref(null)
const newFreindId = ref(null)

onMounted(() => {
  getNewFrinedList()
})

// 获取新朋友数据列表
const getNewFrinedList = async () => {
  const res = await newsController.getNewFriendList()
  if(res.data.code === 200) {
    newFriendList.value = res.data.data
  }
  console.log('新朋友列表')
  console.log(newFriendList.value)
}

// 接收添加好友
const acceptAddFriend = async (id) => {
  newFreindId.value = id
  const res = await newsController.acceptOrRefuseFriend({user_friend_id: id, status: 0})
  console.log(res)
  if(res.data.code === 200) {
    isShowResult.value = false
    resultTitle.value = '已添加'
    emit('changeIsHaveNew', isShowResult.value)
  }
}

// 拒绝添加好友
const refuseAddFriend = async (id) => {
  newFreindId.value = id
  const res = await newsController.acceptOrRefuseFriend({user_friend_id: id, status: 1})
  if(res.data.code === 200) {
    isShowResult.value = false
    resultTitle.value = '已拒绝'
    emit('changeIsHaveNew', isShowResult.value)
  }
}

</script>

<style lang="scss" scoped>
.new_friend {
  height: 100%;
  &-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #DFDFDF;
    height: 7%;
    background-color: #F7F7F7;
    .left {
      display: flex;
      align-items: center;
      margin-left: 30px;
      img {
        width: 40px;
        height: 40px;
      }
      span {
        font-size: 20px;
        margin-left: 15px;
        font-weight: bold;
      }
    }
    .right {
      margin-bottom: 20px;
      .more-icon {
        width: 20px;
        height: 20px;
        opacity: .4;
        margin-right: 25px;
        margin-top: 20px;
      }
    }
  }
  &-body {
    height: 93%;
    background-color: #F7F7F7;
    margin:0 auto;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    .container{
      width:70%;
      min-width:400px;

    }
    .outerLayer{
      height:60px;
      display:flex;
      align-items:center;
      border-bottom:1px solid #e0e0e0a3;

      .left{
        width: 40px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #e6e6e6;
        margin-right: 10px;

        img{
          height:40px;
          width:40px;
        }
      }
      .right{
        flex:1;
        .right-title{
          font-size:14px;
          display:block;
          margin-bottom: 5px;
        }
        .right-desc{
            font-size:12px;
            color:#929499;
            display:block;
        }
      }
      .extra{
        display:flex;
        justify-content:center;
        align-items:cener;
      }
    }
  }
  
}
::v-deep .el-textarea__inner {
  height: 90px;
  background-color: #F7F7F7;
  font-size: 14px;
  letter-spacing: 1px;
  border: none;
  outline: none;
  box-shadow: none;
}

</style>
